<template>
  {{PaGeDaTa.startY}} {{PaGeDaTa.startX}}
  <view ref="HF" id="HF" class="" @click="onclick" @touchstart="ontouchstart" @touchmove="ontouchmove"
        :style="{top:PaGeDaTa.startY,left:PaGeDaTa.startX}">
    调试器
  </view>
</template>

<script setup lang="ts">

type PaGeType = {
  startY:string,
  startX:string,
  start:{}
}
let onType:boolean = true

const PaGeDaTa =  <PaGeType>reactive({
  startY: '90%',
  startX: '60%',
  start: {},
})


function getValue<T extends Object,K extends keyof T>(o:T, key: K){
  return o[key]
}

const ontouchmove=(touch:any) => {
  touch = touch.touches[0]
  let page:any = PaGeDaTa.start

  if ((touch.pageY - 20 > 0 && touch.pageX - 50 > 0) &&
      (Math.abs(touch.pageX - page.pageX) > 20 ||
          Math.abs(touch.pageY - page.pageY) > 20)) {
    PaGeDaTa.startY = (touch.pageY + uni.upx2px(60) / 2) + 'px'
    PaGeDaTa.startX  = (touch.pageX - uni.upx2px(180) / 2) + 'px'
    onType = true
  } else {
    onType = false
  }
}

const ontouchstart =(e)=> {
  PaGeDaTa.start = e.touches[0]
}

</script>

<style lang="scss" scoped>
#HF {
  text-align: center;
  position: fixed;
  border-radius: 10rpx;
  background: #FF4A46;
  color: #FFFFFF;
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  z-index: 999;
  left: 60%;
}
</style>
